<template>
  <div class="chart-detail">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="detail-top">
      <div class="top-left">
        医疗收入占比情况（月）
      </div>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>
    <div class="detail-box" :style="{height:height+'px'}">
      <h3 class="chart-title new-top-left">
        <div class="title-circle"></div>
        <div class="title-name">{{title}}占医疗收入比重详情（年）</div>
      </h3>
      <div class="detail-content" id="myChart">

      </div>
    </div>
  </div>
</template>
<script>
  import '../../assets/css/chartDetail.css'
  import {getChartItemDetail2} from '../../api/api'
  export default {
    name: 'chartDetail',
    props: ['isChange'],
    data() {
      return {
        title: '医疗收入占比详情（年）',
        height: 800,
        canShow:true
      }
    },
    mounted() {
      this.getContentH();
      setTimeout(() => {
        this.myChart = this.$echarts.init(document.getElementById('myChart'), null, {renderer: 'canvas'})
        //给echart 加loading效果
        this.myChart.showLoading()
        let params = this.$route.params
        this.drawSingleLine(JSON.parse(params.medicalTypeDetail));
      }, 101)
//      getChartItemDetail2('medExpGrowthTrendAnalysisDetail', params.queryYear, params.areaCode, params.costType, params.medicalCategory).then(res => {
//        let json = res.data;
//        if (res.code == 0) {
//          this.title = json.reportName;
//          this.drawLine(json);
//        }
//      })
    },
    watch: {
      isChange(){
        this.getContentH();
      },
    },
    methods: {
      //设置高度
      getContentH(){
        setTimeout(() => {
          let height = document.documentElement.clientHeight;
          let barHeight = 0;
          if (document.querySelector('.el-header')) {
            this.canShow = true;
            barHeight = document.querySelector('.el-header').clientHeight;
          }else{
            this.canShow = false;
          }
          this.height = height - barHeight - 84;
        }, 100)
        if (this.myChart) {
          setTimeout(() => {
            this.myChart.resize();
          }, 301)
        }
      },
      goBack(){
        this.$router.push(this.$route.query.hash.slice(1,this.$route.query.hash.length));
        sessionStorage.setItem('isPrev',1)
      },
      drawSingleLine(data){
        this.title = data.medicalName;
        this.myChart.hideLoading();
        let json = {}
        json.monthList = data.year
        json.monthlyGrowthRateList = data.radio
//        json.monthList = ['2017-01', '2017-02', '2017-03', '2017-04', '2017-05', '2017-06', '2017-07', '2017-08', '2017-09', '2017-10', '2017-11', '2017-12']
//        json.monthlyGrowthRateList = ['14', '93', '48', '66', '90', '16', '20', '10', '30', '40', '12', '15'];
//        json.totalList = ['100', '169', '300', '60', '290', '500', '450', '236', '845', '302', '932', '235'];
        this.myChart.setOption({
          tooltip:{
            show:true,
            textStyle :{
              fontSize:12
            },
          },
          legend: {
            top: 'top',
            left:'center',
            itemWidth: 30,
            itemHeight: 10,
            itemGap: 20,
            tooltip: {
              show: true,
              formatter:function(params){
                console.log(paramse)
              }
            },
            data:[{
              name:'增长率',
              icon:'circle'
            }],
            textStyle:{
              color:'#fff'
            },
            selectedMode: false
          },
          xAxis: {
            data: json.monthList,
            show: true,
            axisLine: {
              show: true,//显示x轴坐标线并设置为虚线
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisTick: {
              show: false //不显示x轴坐标的刻度
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#2a4565'
              }
            },
            position: 'left',
            minInterval: 5,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          },
          series: [{
            type: 'line',
            name: '增长率',
            showSymbol: true,
            data: json.monthlyGrowthRateList,
            symbolSize: 10,
            color: '#129cff',
            symbol: 'circle',
            tooltip:{
              show:true,
              formatter:function(params){
                return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
              }
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%'
            },
          }]
        });
      }
    }
  }
</script>
<style scoped>
  /*.new-top-left {*/
    /*line-height: 48px;*/
    /*margin-left: 10px;*/
  /*}*/
</style>
